<template>
  <div class="chart-item-container">
    <ul class="target-list">
      <li v-for="(item, i) in targetList" :key="i" :style="{ marginRight: (item.line || 0) + 'px', width: item.width || '20%' }">
        <p class="title">
          <span>{{ item.name }}</span>
          <a-popover v-if="item.tip">
            <template #content>
              <p style="width: 400px">{{ item.tip }}</p>
            </template>
            <icon-question-circle style="margin-left: 4px" />
          </a-popover>
        </p>
        <p class="val">
          <span v-if="item.type == 2">{{ item.unit }}</span>
          <span>{{ item.value }}</span>
          <span v-if="item.type == 3">{{ item.unit }}</span>
        </p>
        <div class="val-other">
          <p class="label">环比</p>
          <p>
            <span v-if="item.type == 2">{{ item.unit }}</span>
            <span>{{ item.value1 }}</span>
            <span v-if="item.type == 3">{{ item.unit }}</span>
          </p>
          <icon-caret-up style="color: rgb(var(--success-5))" v-if="item.value1 < item.value" />
          <icon-caret-down style="color: rgb(var(--danger-5))" v-else />
        </div>
        <div class="val-other">
          <p class="label">年同比</p>
          <p>
            <span v-if="item.type == 2">{{ item.unit }}</span>
            <span>{{ item.value2 }}</span>
            <span v-if="item.type == 3">{{ item.unit }}</span>
          </p>
          <icon-caret-up style="color: rgb(var(--success-5))" v-if="item.value2 < item.value" />
          <icon-caret-down style="color: rgb(var(--danger-5))" v-else />
        </div>
        <div class="line" v-if="allowSwitch && targetClicKeys.includes(item.key)" :style="`background-color: ${item.color};`"></div>
      </li>
    </ul>
    <div ref="fullYearSalesChart" class="chart-item"></div>
  </div>
</template>
<script lang="ts" setup>
  import useEcharts from '@/hooks/useEcharts'
  import { nextTick, onBeforeUnmount, onMounted, ref, PropType, computed } from 'vue'
  import { dispose } from 'echarts/core'
  const props = defineProps({
    targetList: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    xData: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    checkedKeys: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
    dataMap: {
      type: Object,
      default: () => {},
    },
    allowSwitch: {
      type: Boolean,
      default: true,
    },
  })
  const targetClicKeys = ref<Array<string>>(JSON.parse(JSON.stringify(props.checkedKeys)))
  const targetClickList = computed(() => props.targetList.filter((el: any) => targetClicKeys.value.includes(el.key)))

  function setYData() {
    return targetClickList.value?.map((item) => {
      let max = Math.max.apply(null, props.dataMap[item.key] || [])
      return {
        type: 'value',
        name: item.name,
        min: 0,
        max: setMaxInterval(max).max,
        splitNumber: 5,
        minInterval: 1,
        nameGap: 20,
        interval: setMaxInterval(max).interval,
        axisLine: {
          show: true,
          lineStyle: {
            color: item.color,
          },
        },
      }
    })
  }
  // 为了平均分布Y轴
  function setMaxInterval(max: number) {
    if (max <= 1) {
      return { max: 1, interval: 0.2 }
    }
    if (max <= 5) {
      return { max: 5, interval: 1 }
    }
    if (max <= 10) {
      return { max: 10, interval: 2 }
    }
    if (max <= 50) {
      return { max: 50, interval: 10 }
    }
    if (max <= 100) {
      return { max: 100, interval: 20 }
    }
    if (max <= 500) {
      return { max: 500, interval: 100 }
    }
    if (max <= 1000) {
      return { max: 1000, interval: 200 }
    }
    if (max <= 2000) {
      return { max: 2000, interval: 400 }
    }
    if (max <= 5000) {
      return { max: 5000, interval: 1000 }
    }
    if (max <= 8000) {
      return { max: 8000, interval: 1600 }
    }
    if (max <= 10000) {
      return { max: 10000, interval: 2000 }
    }
    if (max <= 20000) {
      return { max: 20000, interval: 4000 }
    }
    if (max <= 50000) {
      return { max: 50000, interval: 10000 }
    }
    if (max <= 80000) {
      return { max: 80000, interval: 16000 }
    }
    if (max <= 100000) {
      return { max: 100000, interval: 20000 }
    }
    if (max <= 500000) {
      return { max: 500000, interval: 100000 }
    }
    if (max <= 1000000) {
      return { max: 1000000, interval: 200000 }
    }
    if (max <= 2000000) {
      return { max: 2000000, interval: 400000 }
    }
    if (max <= 5000000) {
      return { max: 5000000, interval: 1000000 }
    }
    if (max <= 10000000) {
      return { max: 10000000, interval: 2000000 }
    }
    if (max <= 50000000) {
      return { max: 50000000, interval: 10000000 }
    }
    return {
      max: Math.ceil(max / 5) * 5,
      interval: Math.ceil(max / 5),
    }
  }
  // 获取series轴信息
  function setSeries() {
    return targetClickList.value?.map((item, index) => {
      return {
        name: item?.name,
        yAxisIndex: index,
        type: 'line',
        data: props.dataMap[item.key],
        color: item.color,
      }
    })
  }
  const loading = ref(true)
  const fullYearSalesChart = ref<HTMLDivElement | null>(null)
  let interval: any = null
  const init = () => {
    const option = {
      grid: {
        left: 50,
        top: 40,
        bottom: 10,
        right: 50,
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        data: props.xData,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#98A3B2',
            width: 0,
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: setYData(),
      series: setSeries(),
    }
    setTimeout(() => {
      loading.value = false
      setTimeout(() => {
        nextTick(() => useEcharts(fullYearSalesChart.value as HTMLDivElement).setOption(option))
      }, 100)
    }, 100)
  }
  const updateChart = () => {
    useEcharts(fullYearSalesChart.value as HTMLDivElement).resize()
  }
  onMounted(init)
  onBeforeUnmount(() => {
    dispose(fullYearSalesChart.value as HTMLDivElement)
    clearInterval(interval)
  })
</script>

<style lang="less" scoped>
  .target-list {
    display: flex;
    li {
      border: 1px solid #eee;
      padding: 10px;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      max-width: 160px;
      .line {
        position: absolute;
        height: 3px;
        width: 100%;
        top: 0;
        left: 0;
      }
      .title {
        color: #666;
      }
      .val {
        font-weight: bold;
        font-size: 16px;
      }
      .val-other {
        display: flex;
        align-items: center;
        color: #666;
        font-size: 10px;
        .label {
          width: 45px;
          flex-shrink: 0;
        }
        .arco-icon {
          font-size: 16px;
          margin-left: 5px;
          flex-shrink: 0;
        }
      }
    }
  }
  .chart-item {
    height: 300px;
  }
</style>
